<template>
  <div class="choose-city" ref="chooseCity">
    <Dropdown trigger="custom" :visible="show" @on-clickoutside="handleClickOutside">
      <a href="javascript:void(0)" @click.prevent.stop="onShow">
        {{ areaName || '区域选择' }}
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <template #list>
        <DropdownMenu @click.stop>
          <div class="choose-city-drop">
            <Input search placeholder="请输入搜索" v-model="searchKey"/>
            <tabs v-model="tabName">
              <tab-pane label="省" v-if="['p', 'c', 'a'].includes(type)" name="province">
                <ul class="choose-city-drop-pane" v-if="'province' === tabName">
                  <li class="area-item" v-for="province in provinceList"
                      :class="{'selected': chooseList[0] && chooseList[0].code === province.code}"
                      :title="province.name"
                      @click="onProvinceClick(province)" :key="province.code">
                    {{ province.name }}
                  </li>
                </ul>
              </tab-pane>
              <tab-pane label="市" v-if="['c', 'a'].includes(type)" name="city" :disabled="!chooseList[0]">
                <ul class="choose-city-drop-pane" v-if="'city' === tabName">
                  <li class="area-item" v-for="city in cityList"
                      :class="{'selected': chooseList[1] && chooseList[1].code === city.code}"
                      :title="city.name" @click="onCityClick(city)"
                      :key="city.code">
                    {{ city.name }}
                  </li>
                </ul>
              </tab-pane>
              <tab-pane label="区" v-if="['a'].includes(type)" name="area" :disabled="!chooseList[2]">
                <ul class="choose-city-drop-pane" v-if="'area' === tabName">
                  <li class="area-item" v-for="area in areaList"
                      :class="{'selected': chooseList[2] && chooseList[2].code === area.code}"
                      :title="area.name" @click="onAreaClick(area)"
                      :key="area.code">
                    {{ area.name }}
                  </li>
                </ul>
              </tab-pane>
            </tabs>
          </div>
        </DropdownMenu>
      </template>
    </Dropdown>
  </div>
</template>

<script>
import areaData from "@/utils/areaData";

export default {
  name: "ChooseArea",
  props: {
    /**
     * p省,c市,a区/县
     */
    type: {
      type: String,
      default: 'a'
    },
    /**
     * 总是触发change回调
     */
    allChange: Boolean
  },
  data() {
    return {
      areaName: '',
      show: false,
      tabName: 'province',
      searchKey: '',
      chooseList: []
    }
  },
  computed: {
    provinceList() {
      return areaData.provinceList.filter(item => item.name.includes(this.searchKey))
    },
    cityList() {
      return areaData.cityList.filter(item => item.parentCode === this.chooseList[0].code && item.name.includes(this.searchKey))
    },
    areaList() {
      return areaData.areaList.filter(item => item.parentCode === this.chooseList[1].code && item.name.includes(this.searchKey))
    }
  },
  methods: {
    onShow() {
      this.show = !this.show;
    },
    onProvinceClick(item) {
      this.chooseList = [];
      this.chooseList[0] = item;
      if ("p" === this.type) {
        this.$emit('change', this.chooseList);
        this.show = false;
        return;
      } else if (this.allChange) {
        this.$emit('change', this.chooseList);
      }
      this.tabName = 'city';
    },
    onCityClick(item) {
      if (this.chooseList[2]) {
        this.chooseList.pop();
      }
      this.chooseList[1] = item;
      if ("c" === this.type) {
        this.$emit('change', this.chooseList);
        this.show = false;
        return;
      } else if (this.allChange) {
        this.$emit('change', this.chooseList);
      }
      this.tabName = 'area';
    },
    onAreaClick(item) {
      this.chooseList[2] = item;
      this.$emit('change', this.chooseList);
      this.areaName = this.chooseList.map(item => item.name).join('-');
      this.show = false;
    },
    handleClickOutside(e) {
      if (this.$refs.chooseCity.contains(e.target)) return;
      this.show = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.choose-city {
  .choose-city-drop-pane {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;

    .area-item {
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      padding: 6px 10px;
      list-style: none;

      &.selected {
        background-color: #1aa5ff;
        color: #ffffff;
      }

      &:hover {
        background-color: rgba(0, 0, 0, .1);
      }
    }
  }
}
</style>
